<template>
  <div class="main">
    <div class="title">
      <div>配置管理</div>
      <el-button type="primary" :icon="CirclePlus" @click="addConfigType"
        >新增配置类型</el-button
      >
    </div>
    <div class="search-bar">
      <div class="label-input">
        <span>搜索内容：</span>
        <el-input v-model="query.queryName" style="width: 200px" />
      </div>
      <el-button class="search-btn" @click="getconfigTabelData">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="cut-line"></div>
    <el-table
      :data="tabelData"
      height="400"
      style="width: 100%"
      border
      v-loading="loading"
      :header-cell-style="headerStyle"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" align="center" label="#" width="50" />
      <el-table-column
        prop="configName"
        align="center"
        label="配置名称"
        width="150"
      />
      <el-table-column
        prop="configKey"
        align="center"
        label="配置属性"
        width="200"
      />
      <el-table-column
        prop="configValue"
        align="center"
        label="配置默认值"
        width="150"
      >
        <template v-slot="scope">
          <div v-if="scope.row.type == '参数配值'">
            <el-button
              style="background-color: #3d839c; color: #fff"
              @click="updateConfigData(scope.row)"
              >配置参数列表</el-button
            >
          </div>
          <div v-else-if="scope.row.type == '默认配值'">
            {{ scope.row.configValue }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        align="center"
        label="配置类型"
        width="100"
      />
      <el-table-column
        prop="isDeleted"
        align="center"
        label="状态"
        width="100"
      />
      <el-table-column prop="remark" align="center" label="备注" width="200" />
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <div class="table-buts">
            <el-button
              style="background-color: #3d839c; color: #fff"
              @click="updateConfig(scope.row)"
              >修改配置类型信息</el-button
            >
            <el-button
              v-if="scope.row.isDeleted == '正常'"
              type="danger"
              @click="endConfig(scope.row.id)"
              >停用</el-button
            >
            <el-button v-else type="success" @click="startConfig(scope.row.id)"
              >启用</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tabelDataTotal"
        :page-size="query.pageSize"
        :current-page="query.pageNum"
        @update:current-page="currentPageChange"
      />
    </div>
    <!-- 添加、修改弹窗 -->
    <el-dialog v-model="dialogTableVisible" :title="title" width="300">
      <div class="dialog-win">
        <el-form
          ref="ruleFormRef"
          :model="table"
          label-width="auto"
          :rules="rules"
        >
          <el-form-item label="配置名称：" prop="configName">
            <el-input v-model="table.configName" style="width: 240px" />
          </el-form-item>
          <el-form-item
            v-if="title == '添加配置类型'"
            label="配置属性："
            prop="configKey"
          >
            <el-input v-model="table.configKey" style="width: 240px" />
          </el-form-item>
          <el-form-item
            v-if="title == '添加配置类型'"
            label="配置类型："
            prop="type"
          >
            <el-select
              v-model="table.type"
              placeholder="请选择类型"
              style="width: 240px"
            >
              <el-option label="默认配值" :value="0" />
              <el-option label="参数配值" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="table.type == 0"
            label="配置默认值："
            prop="configValue"
          >
            <el-input v-model="table.configValue" style="width: 240px" />
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="table.remark" style="width: 240px" />
          </el-form-item>
          <el-form-item>
            <div class="from-but">
              <el-button type="warning" @click="submit(ruleFormRef)"
                >确定</el-button
              >
              <el-button type="info" @click="resetForm(ruleFormRef)"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { CirclePlus } from "@element-plus/icons-vue";
import message from "@/util/alert.js";
import { ref, reactive, onMounted } from "vue";
import {
  getConfigListApi,
  updateConfigApi,
  addConfigApi,
  startConfigApi,
  endConfigApi,
} from "@/api/configApi.js";
import { useRouter } from "vue-router";
const router = useRouter();
// 查询参数
const query = reactive({
  queryName: "",
  pageNum: 1,
  pageSize: 10,
});
const tabelDataTotal = ref(0);
const loading = ref(false);
const tabelData = ref([
  {
    id: 100,
    configName: "系统是否删除配置",
    configKey: "system:config:isdeleted",
    configValue: null,
    type: "参数配置",
    isDeleted: "正常",
    remark: null,
  },
]);
// 表格头部样式
const headerStyle = () => {
  return {
    backgroundColor: "#a0cfff",
    color: "#000000",
    padding: "8px 0px",
  };
};
// 表格行内样式
const tableRowClassName = ({ row }) => {
  if (row.isDeleted != "正常") {
    return "danger-row";
  }
  return "";
};
// 当前页改变
const currentPageChange = (num) => {
  query.pageNum = num;
  getconfigTabelData();
};
// 获取配置列表
const getconfigTabelData = async () => {
  loading.value = true;
  let res = await getConfigListApi(query);
  tabelDataTotal.value = res.data.total;
  tabelData.value = res.data.rows;
  loading.value = false;
};
// 添加配置类型
const addConfigType = () => {
  table.value = {
    configName: "",
    configKey: "",
    configValue: null,
    type: 0,
    remark: "",
  };
  title.value = "添加配置类型";
  dialogTableVisible.value = true;
};

// 修改配置类型信息
const updateConfig = (row) => {
  table.value = {
    configId: row.id,
    configName: row.configName,
    configKey: row.configKey,
    configValue: row.configValue,
    remark: row.remark,
    type: row.type == "默认配值" ? 0 : 1,
  };
  title.value = "修改配置类型信息";
  dialogTableVisible.value = true;
};
// 启用
const startConfig = (id) => {
  message.confirm({
    title: "提示",
    msg: `是否启用此配置`,
    ok: async () => {
      await startConfigApi(id);
      message.success(`启用成功`);
      getconfigTabelData();
    },
  });
};
// 停用
const endConfig = (id) => {
  message.confirm({
    title: "提示",
    msg: `是否停用此配置`,
    ok: async () => {
      await endConfigApi(id);
      message.success(`停用成功`);
      getconfigTabelData();
    },
  });
};

// 配置参数列表
const updateConfigData = (row) => {
  router.push({
    path: "configData",
    query: {
      configName: row.configName,
      configKey: row.configKey,
    },
  });
};
// 重置
const reset = () => {
  Object.assign(query, {
    queryName: "",
    pageNum: 1,
    pageSize: 10,
  });
  getconfigTabelData();
};
// 弹窗
const table = ref({});
const dialogTableVisible = ref(false);
const title = ref("");
const ruleFormRef = ref(null);
// 添加、修改的规则
const rules = reactive({
  configName: [{ required: true, message: "请输入配置名称", trigger: "blur" }],
  configKey: [{ required: true, message: "请输入配置属性", trigger: "blur" }],
  type: [{ required: true, message: "请选择配置类型", trigger: "change" }],
});
// 提交表单
const submit = async (ruleForm) => {
  if (!ruleForm) return;
  await ruleForm.validate(async (valid, fields) => {
    if (valid) {
      if (title.value == "修改配置类型信息") {
        await updateConfigApi(table.value);
        getconfigTabelData();
        dialogTableVisible.value = false;
        message.success("修改配置类型信息成功");
      } else if (title.value == "添加配置类型") {
        await addConfigApi(table.value);
        getconfigTabelData();
        dialogTableVisible.value = false;
        message.success("配置类型成功");
      }
    }
  });
};
// 重置表单
const resetForm = (ruleForm) => {
  ruleForm.resetFields();
  dialogTableVisible.value = false;
  table.value = {};
};
onMounted(() => {
  getconfigTabelData();
});
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  padding: 10px 20px;
  .title {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
  }
}
.search-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  height: 30px;
  .search-btn {
    background-color: #79bbff;
    color: #ffffff;
  }
  .el-button {
    height: 28px;
  }
}
.label-input {
  display: flex;
  color: #aaaaaa;
  height: 30px;
  align-items: center;
  margin-right: 20px;
  font-weight: 550;
  .el-input {
    border: none;
    height: 30px;
  }
}
.cut-line {
  margin-top: 30px;
  height: 1px;
  background-color: #cdd0d6;
}

.pagination {
  display: flex;
  justify-content: center;

  .el-pagination {
    margin: auto 0;
    margin-top: 10px;
  }
}
:deep(.el-table) {
  margin-top: 20px;
  .el-table__cell {
    padding: 4px;
  }
  .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.value-list {
  .value-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    .el-input {
      margin-right: 10px;
    }
  }
  .add {
    margin-left: 270px;
    margin-bottom: 10px;
    font-size: 24px;
  }
  .add:hover {
    color: #79bbff;
  }
}
.buts {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>